<template>
  <div class="mt container">
    <headTop :headTitle="encodeURI('购物车')" :toHome="'true'"/>
    <div class="zbaff1 zbaff2">
      <ul>
        <li class="li1 clearFloat" v-for="(item,index) in productList" :key="index">
          <div class="myOrder_tt">
            <span><i><img src="../../images/baoma.png"/></i>{{item.name}}</span>
          </div>
          <a href="javascript:;" class="shopCar_list" v-for="(item1,index) in item.list" :key="index">
            <em></em>
            <div class="ig fl"><img :src="item1.img" /></div>
            <div class="fon fr">
              <div class="fon_sp "><span class="fon1">{{item1.title}}</span><span class="fontright">￥{{item1.price}}万</span></div>
              <div class="clearFloat"></div>
              <div class="fon_sp fon3">{{item1.detail_1}}</div>
              <div class="fon_sp fon3">{{item1.detail_2}}</div>
              <div class="fon_sp fon2">{{item1.detail_3}}</div>
              <div class="fon_sp fon5">{{item1.detail_4}}</div>
            </div>
          </a>
        </li>
      </ul>
    </div>
    <!--<foot></foot>-->
    <!-- 底部 开始 -->
    <div class="foot">
      <ul class="clearFloat">
        <li class="car_nav ">
          <div class="myOrder_tt"><em class=""></em><span>全选</span></div>
        </li>
        <li class="car_nav1 ">
          <div class="myOrder_tt"><span>合计：￥28.9W</span></div>
        </li>
        <li class="li_det1">
            <router-link :to="{path: '/submitOrder'} ">
              <p>去结算（2）</p>
            </router-link>
        </li>
      </ul>
    </div>
    <!-- 底部 结束 -->

  </div>
</template>

<script>
  import headTop from "src/components/header/head"
  import foot from '../../components/footer/footGuide'
  import axios from 'axios'
  export default {
        name: "index",
        components : {
          foot,
          headTop
        },
        data(){
          return {
            productList:[]
          }
        },
        created:function () {
          axios.get('/api/cart/index',{
            code : this.$route.query.code,
          }).then(response => {
            this.productList = response.data.productList;
            //console.log(response.data.productList);
          }).catch(err => {
            console.log(err);
          });
        }





    }
</script>

<style lang="scss"  scoped>
  @import "../../style/common";
  @import "../../style/mixin";
  /*购物车*/
  .container{overflow: hidden;}
  .swiper2{width: 100%;}
  .swiper2 .swiper-slide{height: calc(100vh - 50px);background-color: #f5f4f9;color: #fff;text-align: center;box-sizing: border-box !important;overflow: auto !important;}
  .zbaff1 {margin-top:1.2rem;}
  .zbaff1 ul{margin-bottom: 1.25rem;}
  .zbaff1 ul li{padding: 0.28rem 0 .02rem;margin-bottom: 0.04rem;background: #fff;text-align: left;}
  .zbaff1 ul li a{height: 100%;margin-bottom: .26rem;display: inline-block;width: 100%;}
  .zbaff1 ul li .ig{margin-left: 0.24rem;}
  .zbaff1 ul li .ig img{vertical-align: middle;width: 1.5rem;height: 1.5rem;}
  .zbaff1 ul li .fon{width: 5.65rem;position: relative;float: left;}
  .zbaff1 ul li .fon .fon_sp{padding-left: 0.22rem;}
  .zbaff1 ul li .fon .fon1{line-height: .32rem;color: #666;font-size: 0.28rem;padding-top: 0.05rem;width: 4rem;float: left;}
  .fon2{line-height: 100%;font-size: 0.22rem;margin-top: 0.14rem;}
  .zbaff1 ul li .fon .fon3{line-height: .25rem;color: #ccc;font-size: 0.22rem;margin-top: 0.14rem;}
  .zbaff1 ul li .fon .fon4{line-height: .25rem;color: #666;font-size: 0.22rem;padding-top: 0.12rem;margin-top: 0.24rem;text-align: right;padding-right: 0.2rem;}
  .zbaff1 ul li .fon .fon4 input{color: #fff;padding:.1rem .3rem;background: #FA2F5D;border: none;border-radius: 0.5rem;float: right;margin-left: 0.2rem;font-size: 0.24rem;}
  .zbaff1 ul li .fon .fon4 input.btn_line{border: 1px solid #9B9B9B;color: #888;background: none;}
  .zbaff1 ul li .fon .fon5{position: absolute;right: 0.2rem;top:.55rem;color: #9B9B9B;font-size: 0.2rem;line-height:.32rem;text-align: right;}
  .zbaff1 ul li .fon .fontright{position: absolute;right: 0.16rem;line-height: .32rem;font-size: 0.28rem;top: 0.06rem;color: #9B9B9B;}
  .fon2{color: #888;}
  .zbaff1 ul li.li2 .fon .fon2{color: #9B9B9B;}
  .myOrder_tt{border-bottom: dashed 1px #dddddd;margin-bottom:0.2rem ;}
  .myOrder_tt span{line-height: .60rem;font-size: 0.28rem;color: #666;margin-left: 0.24rem;}
  .myOrder_tt span i img{width: .4rem;padding-right: .1rem;padding-bottom: .1rem;}
  .myOrder_tt span.des{float: right;color: #71b247;margin-right: .2rem;font-size: .22rem;}
  .myOrder_tt label{height: 0.4rem;}
  .myOrder_tt input[type=checkbox]{width: 0.2rem;height: 0.2rem;}
  /* 我的二代族员 */
  .zbaff2 ul li .fon .fon6{color: #4A4A4A;font-size: 0.22rem;line-height: .36rem;margin-top: 0.2rem;border-top: dashed 1px #dddddd;padding-top: 0.22rem;display: inline-block;}
  .zbaff2 ul li .fon .fon6 span{padding:0 .1rem;border: solid 1px #ffcd79;border-radius: 3px;color: #ee9b11;height: 0.36rem;line-height: 0.36rem;margin-bottom: .1rem;float: left;margin-right: .1rem;}

  .zbaff1 ul li a.shopCar_list{margin-left: 0.3rem;position: relative;}
  a.shopCar_list div.fon{width: 5.35rem;}
  a.shopCar_list .fon_sp  span.fon1{width: 3.8rem;}
  .myOrder_tt em{display: inline-block;width: 0.28rem;height: 0.28rem;background: url(../../images/deposit1.png) no-repeat center;background-size: 0.28rem;float: left;margin-top: 0.14rem;margin-left: 0.14rem;margin-right: -0.08rem;}
  .myOrder_tt em.em_active{background: url(../../images/deposit2.png) no-repeat center;background-size: 0.28rem;}
  a.shopCar_list em{position: absolute;left: -0.36rem;top: 0.1rem; display: inline-block;width: 0.28rem;height: 0.28rem;background: url(../../images/deposit1.png) no-repeat center;background-size: 0.28rem;float: left;margin-top: 0.14rem;margin-left: 0.2rem;margin-right: -0.08rem;}
  a.shopCar_list em.em_active{background: url(../../images/deposit2.png) no-repeat center;background-size: 0.28rem;}
  .car_nav .myOrder_tt{height: 1.16rem;line-height: 1.16rem;vertical-align: middle;}
  .car_nav .myOrder_tt em{margin-top: .45rem;}
  .car_nav .myOrder_tt span{font-size: 0.26rem;height: 1.16rem;line-height: 1.16rem;}
  .foot ul li.car_nav{width: 2rem;}
  .foot ul li.car_nav1{width: 2.5rem;}
  .car_nav1 span{font-size: 0.3rem;height: 1.16rem;line-height: 1.16rem;display:block;margin: 0;}

  .foot{position: fixed;bottom: 0;width: 100%;background: #fff;border-top: solid 1px #F5F4F9;z-index: 1000;height: 1.16rem;}
  .foot ul li{width: 25%;float: left;height: 1.16rem;}
  .foot ul li p{text-align: center;line-height: 100%;color: #4A4A4A;font-size: 0.18rem;margin-top: 0.13rem;}
  .foot ul li.li_active p{color: #FA2F5D;}
  .foot ul li:hover p{color: #FA2F5D;}
  .foot ul li.li_det1{width: 3rem;background: #FA2F5D;}
  .foot ul li.li_det1 p{height: 1.16rem;color: #fff;line-height: 1.16rem;margin: 0;font-size: 0.3rem;}
</style>
